<template>
  <div>
    <Card>
      <Tabs v-model="tabName" :animated="false" style="overflow: visible" @on-click='typeClick'>
        <TabPane label="活动详情" class="tab" name="details">
          <Divider orientation="left">活动详情</Divider>
          <div>
            <Form ref="form" :model="form" :label-width="100" disabled>
              <FormItem label="海报" required>
                <upload-pic-input v-model="form.posterUrl" style="width: 350px" placeholder="上传图片尺寸：750*300px"></upload-pic-input>
              </FormItem>
              <FormItem label="活动名称" required>
                <div class="item">
                  <Input v-model="form.name" placeholder="请输入活动名称" />
                </div>
              </FormItem>
              <FormItem label="活动时间" required>
                <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动日期和时间" v-model="form.activityStartStopTime" style="width: 350px"></Date-picker>
              </FormItem>
              <FormItem v-if="activityType==0&&submitType==2" label="每人限购" required>
                <div class="item">
                  <Input v-model="form.quantity" placeholder="请输入限购数量" />
                </div>
              </FormItem>
              <FormItem class="form-item-view-el" label="投放区域" required>
                <RadioGroup type="button" button-style="solid" v-model="form.salesArea">
                  <Radio title="全国投放" :label="0">
                    <span>全国投放</span>
                  </Radio>
                  <Radio title="区域投放" :label="1">
                    <span>区域投放</span>
                  </Radio>
                </RadioGroup>
                <region v-if="form.salesArea=='1'" :addressId="morenregionId" style="width: 350px;margin-top:24px" />
              </FormItem>
              <FormItem v-if="activityType==0&&submitType!=='2'||activityType==1&&submitType=='2'" class="form-item-view-el" label="活动内容">
                <editors openXss id="content" v-model="form.content"></editors>
              </FormItem>
            </Form>
          </div>
        </TabPane>

        <!-- 商品信息 -->
        <TabPane v-if="activityType==0" label="商品信息" class="tab" name="goods">
          <Divider orientation="left">{{`${orderData.storeName}  ${orderData.storePhone} (${orderData.storeAddressPath})`||''}}</Divider>
          <div class="goodsInfoList">
            <template v-for="(item,index) in orderData.goodsVOList">
              <div class="goodsItem">
                <img :src="item.original" alt="">
                <div class="goods-desc">
                  <div class="goods-title">
                    {{item.goodsName}}
                  </div>
                  <div class="goods-price">
                    <span class="hb-money">焕贝</span>
                    <span class="hb-money text-limit2">
                      {{item.price}}
                    </span>
                  </div>
                </div>
              </div>
            </template>
            <Spin fix v-if="loading"></Spin>
          </div>
        </TabPane>

        <!-- 审核意见 -->
        <TabPane v-if="auditStatus !== '0'&&submitType!=='0'" label="审核意见" class="tab" name="audit">
          <div style="margin-top: 20px" class="text-box" v-for="(item,index) in approvalOpinionList " :key="index">
            <p class="item">
              <span class="label">审核意见：</span>
              <span class="info">{{item.reason||'无'}}</span>
            </p>
            <p class="item">
              <span class="label">审核时间：</span>
              <span class="info">{{item.createTime}}</span>
            </p>
            <p class="item">
              <span class="label">审核人：</span>
              <span class="info">{{`${item.nickName} (${item.submitType==1?'城市合伙人':item.submitType==0 ||item.submitType==null?'平台':'商家'})  ${item.mobile }`}}</span>
            </p>
          </div>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import {
  getApprovalOpinion,
  activityDetail,
  getGoodsInfo,
} from "@/api/activity.js"
import editors from "@/views/my-components/lili/editors"
import uploadPicInput from "@/views/my-components/lili/upload-pic-input"
import region from "@/views/lili-components/region-every"


export default {
  name: "audit-detail",
  components: {
    editors,
    uploadPicInput,
    region
  },
  data () {
    return {
      auditStatus: '',//审核状态
      activityType1: '',
      morenregionId: '',// 默认地区
      form: {
        name: "", //商家名称
        salesArea: 0,// 销售区域
        name: '', //活动名称
        content: '',
        activityType: 0,//活动类型
        activityStartStopTime: '',//活动起止时间
        posterUrl: '',
        regionId: '',
        launchArea: '',
        quantity: '',//限购
      },//活动详情
      activityType: '',//活动类型
      submitType: '',//身份
      goodsId: '', // 商品活动id
      storeNum: 0,//商家数量
      total: 0, //店铺列表条数
      //审核意见
      approvalOpinionList: [],
      //商品信息
      orderData: [],
      loading: false,
      tabName: "details", // tab栏name值
      tabNameList: ["details", "goods", "audit"], // tab栏name值数组
    }

  },
  methods: {
    //样式请求接口
    typeClick (type) {
      let params = {
        activityId: this.goodsId
      }
      if (type == 'goods') {
        // //商品信息
        getGoodsInfo(params).then((res) => {
          if (res.success) {
            this.orderData = res.result
          }
        })
      } else if (type == 'audit') {
        // //审批意见
        getApprovalOpinion(params).then((res) => {
          if (res.success) {
            this.approvalOpinionList = res.result
          }
        })
      } else {
        //活动详情
        activityDetail(this.goodsId).then((res) => {
          if (res.success) {
            this.form = {
              ...res.result,
              activityStartStopTime: [res.result.activityStartTime, res.result.activityEndTime],
              salesArea: Number(res.result.salesArea)
            }
            if (res.result.salesArea + '' === '1') {
              this.morenregionId = res.result.regionId
            }
          }
        })
      }
    },
    // 初始化数据
    init () {
      //获取活动信息
      this.getActivityInfo()
    },
    // 获取活动信息
    getActivityInfo () {
      //活动详情
      activityDetail(this.goodsId).then((res) => {
        if (res.success) {
          this.form = {
            ...res.result,
            activityStartStopTime: [res.result.activityStartTime, res.result.activityEndTime],
            salesArea: Number(res.result.salesArea)
          }
          if (!res.result.quantityFlag) {
            this.form.quantity = '不限量'
          }
          if (res.result.salesArea + '' === '1') {
            this.morenregionId = res.result.regionId
          }
        }
      })
    },

  },
  created () {
    this.activityType = this.$route.query.activityType
    this.submitType = this.$route.query.submitType
    this.auditStatus = this.$route.query.auditStatus
    this.goodsId = this.$route.query.id
    console.log('id', this.submitType)
    this.init()
  },
};
</script>
<style lang="scss" scoped>
.goodsInfoList {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  height: 100%;
  .goodsItem {
    width: 200px;
    height: 290px;
    background-color: rgb(239, 238, 238);
    // border: 2px solid #d0d0d0;
    border-radius: 10px;
    margin: 15px;
    img {
      width: 100%;
      height: 200px;
      border-radius: 10px 10px 0px 0px;
    }
    .goods-desc {
      // background-color: aqua;
      padding: 10px;
      width: 100%;
      color: rgb(0, 0, 0);
      .goods-title {
        width: 100%;
        font-size: 19px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .goods-price {
        font-size: 18px;
        margin-top: 5px;
      }
    }
  }
}

.text-box {
  margin-bottom: 35px;
  .item {
    display: flex;
    align-items: flex-start;
    line-height: 30px;
    margin-bottom: 2px;
    position: relative;
  }
  .label {
    flex-basis: 95px;
    //text-align: right;
    color: rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .info {
    font-weight: 500;
    padding-left: 0;
    margin-bottom: 0;
    width: 100%;
  }
}

/deep/ .ivu-tabs-bar {
  margin: 0;
}

.tab {
  padding: 16px;
  position: relative;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
</style>
